<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	ArrayList<String> jsPaths = (ArrayList<String>) request
			.getAttribute("jsPaths");
	jsPaths.add("/resources/bootstrap/table/jquery.dataTables.min.js");
	jsPaths.add("/resources/bootstrap/table/dataTables.bootstrap.js");
	jsPaths.add("/resources/bootstrap/datePicker/moment.min.js");
	jsPaths.add("/resources/bootstrap/datePicker/bootstrap-datetimepicker.min.js");
	jsPaths.add("/resources/bootstrap/dist/js/typeahead.js");
	jsPaths.add("/resources/custom/newPadding/newPadding.js");
%>
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/table/dataTables.bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/datePicker/bootstrap-datetimepicker.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/dist/css/typeaheadjs.css"
	rel="stylesheet">
<script type="text/javascript">
	var errorMsg = "${error}";
</script>
<div id="alert-warning"
	class="alert alert-warning alert-dismissable hidden">
	<button type="button" class="close" data-dismiss="alert"
		aria-hidden="true">&times;</button>
</div>
<form role="form">
	<div class="row">
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="fc" class="control-label">FC:</label>
			</div>
			<div class="col-md-9">
				<input type="text"
					class="form-control column_filter column_filter suggestfc"
					placeholder="FC" data-column="1" id="col1_filter" />
			</div>
		</div>
		<div class="form-group col-md-5">
			<div class="col-md-5">
				<label for="sm" class="control-label">Ship Method:</label>
			</div>
			<div class="col-md-7">
				<input type="text" class="form-control column_filter suggestSM"
					data-column="2" id="col2_filter" placeholder="Ship Method" />
			</div>
		</div>
		<div class="form-group col-md-3">
			<div class="col-md-3">
				<label for="padding" class="control-label">Padding:</label>
			</div>
			<div class="col-md-9">
				<input type="text" class="form-control column_filter suggestPadding"
					data-column="3" id="col3_filter" placeholder="Padding" />
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="province" class="control-label">Province:</label>
			</div>
			<div class="col-md-9">
				<input type="text"
					class="form-control column_filter suggestProvince" data-column="4"
					id="col4_filter" placeholder="Province" />
			</div>
		</div>
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="city" class=" control-label">City:</label>
			</div>
			<div class="col-md-9">
				<input type="text" class="form-control  column_filter suggestCity"
					data-column="5" id="col5_filter" placeholder="City" />
			</div>
		</div>
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="district" class="control-label">District:</label>
			</div>
			<div class="col-sm-9">
				<input type="text"
					class="form-control  column_filter suggestDistrict" data-column="6"
					id="col6_filter" placeholder="District" />
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group  col-md-6">
			<div class="col-md-3">
				<label for="startDate" class="control-label">Start Date:</label>
			</div>
			<div class="col-sm-9">
				<input type='text'
					class="form-control  column_filterD column_filter" data-column="7"
					id="col7_filter" placeholder="Start Date"
					data-date-format="YYYY-MM-DD" />
			</div>
		</div>
		<div class="form-group  col-md-6">
			<div class="col-md-3">
				<label for="endDate" class="control-label">End Date:</label>
			</div>
			<div class="col-sm-9">
				<input type='text'
					class="form-control  column_filterD column_filter" data-column="8"
					id="col8_filter" placeholder="End Date"
					data-date-format="YYYY-MM-DD" />
			</div>
		</div>
	</div>
</form>

<div class="row">
	<button class="btn btn-success btn-sm" id="addNewPadding">New</button>
	<button class="btn btn-success btn-sm" id="submitPadding">Sumbit</button>
</div>

<div class="row">
	<div class="table-responsive">
		<table class="table table-striped" id="newPadding">
			<thead>
				<tr>
					<th>id</th>
					<th>FC</th>
					<th>Ship Method</th>
					<th>Province</th>
					<th>City</th>
					<th>District</th>
					<th>Padding</th>
					<th>Start Date</th>
					<th>End Date</th>
					<th>Options</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>

<!-- add paddiing dialog -->
<div class="modal fade" id="createNewPaddingModel" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Padding</h4>
			</div>

			<form id="addForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/padding/create"
				method="post">
				<div class="modal-body">
					<div class="form-group">
						<label for="fc" class="col-sm-3 control-label">FC</label>
						<div class="col-sm-9">
							<input type="text" class="form-control  suggestfc" id="fc"
								name="fc" placeholder="FC" />
						</div>
					</div>
					<div class="form-group">
						<label for="nickname" class="col-sm-3 control-label">Ship
							Method</label>
						<div class="col-sm-9">
							<input type="text" class="form-control  suggestSM" id="sm"
								name="sm" placeholder="Ship Method" />
						</div>
					</div>
					<div class="form-group">
						<label for="province" class="col-sm-3 control-label">Padding</label>
						<div class="col-sm-9">
							<input type="text" class="form-control  suggestPadding"
								id="padding" name="padding" placeholder="Padding" />
						</div>
					</div>
					<div class="form-group">
						<label for="province" class="col-sm-3 control-label">Province</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestProvince"
								id="province" name="province" placeholder="Province" />
						</div>
					</div>
					<div class="form-group">
						<label for="city" class="col-sm-3 control-label">City</label>
						<div class="col-sm-9">
							<input type="text" class="form-control  suggestCity" id="city"
								name="city" placeholder="City" />
						</div>
					</div>
					<div class="form-group">
						<label for="district" class="col-sm-3 control-label">District</label>
						<div class="col-sm-9">
							<input type="text" class="form-control  suggestDistrict"
								id="district" name="district" placeholder="District" />
						</div>
					</div>
					<div class="form-group">
						<label for="startDate" class="col-sm-3 control-label">Start
							Date</label>
						<div class="col-sm-9">
							<input type='text' class="form-control" id="startDate"
								name="startDate" placeholder="Start Date"
								data-date-format="YYYY-MM-DD" />
						</div>
					</div>
					<div class="form-group">
						<label for="endDate" class="col-sm-3 control-label">End
							Date</label>
						<div class="col-sm-9">
							<input type='text' class="form-control" id="endDate"
								name="endDate" placeholder="End Date"
								data-date-format="YYYY-MM-DD" />
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Create</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- edit paddiing dialog -->
<div class="modal fade" id="editNewPaddingModel" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Padding</h4>
			</div>
			<form id="editForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/padding/update"
				method="post">
				<div class="modal-body">
					<input type="hidden" id="idE" name="id">

					<div class="form-group">
						<label for="fc" class="col-sm-3 control-label">FC</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestfc" id="fcE"
								name="fc" placeholder="FC" />
						</div>
					</div>

					<div class="form-group">
						<label for="nickname" class="col-sm-3 control-label">Ship
							Method</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestSM" id="smE"
								name="sm" placeholder="Ship Method" />
						</div>
					</div>
					<div class="form-group">
						<label for="province" class="col-sm-3 control-label">Padding</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestPadding"
								id="paddingE" name="padding" placeholder="Padding" />
						</div>
					</div>
					<div class="form-group">
						<label for="province" class="col-sm-3 control-label">Province</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestProvince"
								id="provinceE" name="province" placeholder="Province" />
						</div>
					</div>
					<div class="form-group">
						<label for="city" class="col-sm-3 control-label">City</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestCity" id="cityE"
								name="city" placeholder="City" />
						</div>
					</div>
					<div class="form-group">
						<label for="district" class="col-sm-3 control-label">District</label>
						<div class="col-sm-9">
							<input type="text" class="form-control suggestDistrict"
								id="districtE" name="district" placeholder="District" />
						</div>
					</div>
					<div class="form-group">
						<label for="startDate" class="col-sm-3 control-label">Start
							Date</label>
						<div class="col-sm-9">
							<input type='text' class="form-control" id="startDateE"
								name="startDate" placeholder="Start Date"
								data-date-format="YYYY-MM-DD" />
						</div>
					</div>
					<div class="form-group">
						<label for="endDate" class="col-sm-3 control-label">End
							Date</label>
						<div class="col-sm-9">
							<input type='text' class="form-control" id="endDateE"
								name="endDate" placeholder="End Date"
								data-date-format="YYYY-MM-DD" />
						</div>
					</div>



				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save User</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- delete paddiing dialog -->
<div class="modal fade" id="deleteNewPaddingModel">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">User Delete</h4>
			</div>
			<div class="modal-body">
				<p>This action will delete padding information without recovery,
					are you sure to do this?</p>
			</div>
			<form class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/padding/delete"
				method="post">
				<input type="hidden" id="idD" name="id">
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Delete</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- submit paddiing dialog  -->
<div class="modal fade" id="submitNewPaddingModel" tabindex="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Padding Submit</h4>
			</div>

			<form id="submitForm" class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/padding/submit"
				method="post">
				<div class="modal-body">
					<div class="form-group">
						<label for="tt" class="col-sm-3 control-label">TT&nbsp;&nbsp;URL:</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="tt" name="tt"
								placeholder="Ticket URL" />
						</div>
					</div>
					<div class="form-group">
						<label for="tt" class="col-sm-3 control-label">REASON:</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="reason" name="reason"
								placeholder="REASON" />
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>
